<template>
  <div class="supply-setting">
        <Breadcrumb :pathContent="content"/>
        <div class="supply-content">
          <el-form>
            <el-form-item>
                <el-dropdown trigger="click" @command="dropdownStateChange">
                    <span class="el-dropdown-link">
                        {{dropdownValue}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{key : 'state', value: null, title: '全部状态' }">
                            全部状态
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'state', value: 0, title: '启用' }">
                           启用
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'state', value: 1, title: '禁用' }">
                            禁用
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="dropdownStateChange">
                    <span class="el-dropdown-link">
                        {{clearingMethod}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{key : 'settlementType', value: null, title: '全部方式' }">
                           全部方式
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'settlementType', value: 0, title: '日结' }">
                           日结
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'settlementType', value: 1, title: '周结' }">
                           周结
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'settlementType', value: 2, title: '月结' }">
                           月结
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="dropdownStateChange">
                    <span class="el-dropdown-link">
                        {{enterpriseType}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{key : 'supplierType', value: null, title: '全部类型' }">
                           全部类型
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'supplierType', value: 0, title: '企业' }">
                           企业
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'supplierType', value: 1, title: '旅行社' }">
                           旅行社
                        </el-dropdown-item>
                        <el-dropdown-item :command="{key : 'supplierType', value: 2, title: '酒店' }">
                           酒店
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="input-with-select el-input el-input-group el-input-group--append">
                    <input autocomplete="off" placeholder="请输入商家/签约人" type="text" rows="2" validateevent="true" class="el-input__inner" @keyup.enter="handleSearch" v-model="searchKey">
                    <div class="el-input-group__append">
                        <button type="button" class="el-button el-button--default" @click="handleSearch">
                            <i class="el-icon-search"></i>
                        </button>
                    </div>
                </div>
                <!-- <el-input placeholder="请输入员工姓名/账号/手机号/职位/角色" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input> -->
                <el-button type="primary" size="small" style="float: right;" @click="addSuppliers" v-if="addsupplier">新增商家</el-button>
            </el-form-item>
            <el-form-item>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    min-height="250">
                    <el-table-column
                    fixed
                    prop="company"
                    label="商家名称"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="公司类型"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="account"
                    label="账号"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="contractor"
                    label="签约人"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="contractorPhone"
                    label="签约人电话"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    label="联系人"
                    width="70">
                    </el-table-column>
                    <el-table-column
                    prop="userPhone"
                    label="联系人电话"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="clearingMode"
                    label="结算方式"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="clearingTime"
                    label="结算时间"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="state"
                    label="状态"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="editRow(scope.$index, tableData)"
                        type="text"
                        v-if="updatesupplierstate"
                        size="small">
                        {{buttonText[scope.$index]}}
                        </el-button>
                        <el-button
                        @click.native.prevent="editSuppliers(scope.$index, tableData)"
                        type="text"
                        v-if="selectsupplier"
                        size="small">
                        修改
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item style="margin-top: 20px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, prev , pager , next, sizes, jumper"
                    :total="total">
                </el-pagination>    
            </el-form-item>   
        </el-form>
      </div>
  </div>
</template>
<script>
import { getSuppliersList, updateSuppliersState } from '../../public/js/setting'
const Breadcrumb = () => import('@/components/common/Breadcrumb')
export default {
  name: 'Staff',
  data () {
    return {
      clearingMethod: '结算方式',
      enterpriseType: '公司类型',
      dropdownValue: '全部状态',
      content: {
        firstTitle: '设置',
        secondTitle: '供应设置',
        type: 'close'
      },
      showDepartment: false,
      select: '',
      tableData: [],
      sendData: {},
      pageSize: 10,
      pageNum: 1,
      total: 0,
      stateData: null,
      state: null,
      settlementType: null,
      searchKey: null,
      buttonText: [],
      id: null,
      text: ''
    }
  },
  created () {
    this.getSuppliersLists()
  },
  mounted () {
    window.bus.$on('showDepartment', val => {
      this.showDepartment = val
    })
  },
  methods: {
    getSuppliersLists () {
      getSuppliersList(this).then(res => {
        this.tableData = res.data.suppliersMiniEntities
        this.setData()
        this.total = res.data.total
      })
    },
    setData () {
      this.buttonText = []
      this.tableData.forEach((item, index) => {
        if (item.state === '停用') {
          this.buttonText.push('启用')
        } else {
          this.buttonText.push('停用')
        }
      })
    },
    handleSearch () {
      this.getSuppliersLists()
    },
    dropdownStateChange (data) {
      if (data.key === 'state') {
        this.state = data.value
        this.dropdownValue = data.title
      } else if (data.key === 'settlementType') {
        this.settlementType = data.value
        this.clearingMethod = data.title
      } else {
        this.supplierType = data.value
        this.enterpriseType = data.title
      }
      this.getSuppliersLists()
    },
    addSuppliers () {
      this.$router.push('/index/add_suppliers')
    },
    editRow (index, rows) {
      this.id = this.tableData[index].id
      this.tableData[index].state === '启用' ? this.state = 1 : this.state = 0
      this.tableData[index].state === '启用' ? this.text = '停用' : this.text = '启用'
      this.$confirm('此操作将' + this.text + '该商家, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateSuppliersState(this).then(res => {
          this.tableData = res.data.suppliersMiniEntities
          this.setData()
          this.total = res.data.total
          this.$message.success('修改成功')
        })
      }).catch(() => {
      })
    },
    editSuppliers (index, rows) {
      let id = this.tableData[index].id
      sessionStorage.setItem('SuppliersId', id)
      this.$router.push('/index/edit_suppliers')
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getSuppliersLists()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getSuppliersLists()
    }
  },
  components: {
    Breadcrumb
  }
}
</script>
<style lang="scss" scoped>
    .supply-content {
        margin-top: 20px;
        background-color: white;
        padding: 20px;
        position: relative;
    }
    .el-dropdown {
      float: left;
      margin-right: 30px;
    }
    .el-input {
      float: left;
      width: 400px;
      input {
        height: 30px;
        line-height: 30px;
      }
    }
</style>
